<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h3>专利数据</h3>
    </div>
    <div class="text item">

      <el-form label-width="130px">
        <h3>专利类型</h3>
        <el-form-item v-for="(patent, i) in patentList.countGroupByType" :key="i" :label="patent.type">
          <el-input v-model="patent.count" clearable @clear="patentList.countGroupByType.splice(i, 1)"/>
        </el-form-item>
      </el-form>

      <el-form :inline="true" label-width="130px">

        <el-form-item label="专利类型">
          <el-select v-model="countGroupByType.type">
            <el-option label="发明" value="发明"></el-option>
            <el-option label="实用新型" value="实用新型"></el-option>
            <el-option label="外观结构" value="外观结构"></el-option>
            <el-option label="著作权" value="著作权"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByType.count"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCountGroupByType">确定</el-button>
        </el-form-item>
      </el-form>

      <el-form label-width="130px">
        <h3>专利状态</h3>
        <el-form-item v-for="(patent, i) in patentList.countGroupByStatus" :key="i" :label="patent.status">
          <el-input v-model="patent.count" clearable @clear="patentList.countGroupByStatus.splice(i, 1)"/>
        </el-form-item>
      </el-form>

      <el-form :inline="true" label-width="130px">

        <el-form-item label="专利状态">
          <el-select v-model="countGroupByStatus.status">
            <el-option label="证书" value="证书"></el-option>
            <el-option label="授权" value="授权"></el-option>
            <el-option label="进入实审" value="进入实审"></el-option>
            <el-option label="受理" value="受理"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByStatus.count"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCountGroupByStatus">确定</el-button>
        </el-form-item>
      </el-form>


      <el-form label-width="130px">
        <h3>专利总数</h3>
        <el-form-item label="专利总数">
          <el-input v-model="patentList.totalCount"/>
        </el-form-item>
      </el-form>
      <el-form label-width="130px" style="margin-bottom: 20px">
        <h3>新增专利数/年</h3>
            <el-form-item v-for="(item, i) in patentList.countGroupByYear" :key="i" :label="item.year + ''">
              <template #label>
                <span>{{item.year}}</span>
                <el-button size="small" type="danger" @click="patentList.countGroupByYear.splice(i,1)">-</el-button>
              </template>
              <el-input v-model="item.count" clearable @clear="patentList.countGroupByYear.splice(i, 1)"/>
            </el-form-item>
      </el-form>
      <el-form :inline="true" label-width="130px">
        <el-form-item label="日期">
          <el-date-picker
              v-model="countGroupByYear.year"
              placeholder="选择年"
              style="width: 100%"
              type="year"
              value-format="yyyy">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByYear.count"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCountGroupByYear">确定</el-button>
        </el-form-item>
      </el-form>

      <el-form label-width="130px" style="margin-bottom: 20px">
        <h3>新增专利数/月</h3>
            <el-form-item v-for="(item, i) in patentList.countGroupByMonth" :key="i" >
              <template #label>
                <span>{{item.month}}</span>
                <el-button size="small" type="danger" @click="patentList.countGroupByMonth.splice(i,1)">-</el-button>
              </template>
              <el-input v-model="item.count" clearable @clear="patentList.countGroupByMonth.splice(i, 1)"/>
            </el-form-item>
      </el-form>

      <el-form :inline="true" label-width="130px">

        <el-form-item label="日期">
          <el-date-picker
              v-model="countGroupByMonth.month"
              placeholder="选择月"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByMonth.count"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCountGroupByMonth">确定</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div style="text-align: right">
      <el-button type="danger" @click="OverWrite">恢复真实数据</el-button>
      <el-button type="danger" @click="setPatentJson">确定修改</el-button>
    </div>
  </el-card>
</template>

<script>
import {getJson, overWrite, setJson} from "../../network/versionApi";
import {copyObj} from "../../common/utils";

export default {
  name: "patentVersion",
  data() {
    return {
      param: {
        type: "Patent",
        name: "statistics",
        version: 0,
      },
      patentList: {},
      countGroupByYear: {
        year: null,
        count: null
      },
      countGroupByType: {
        type: null,
        count: null
      },
      countGroupByStatus: {
        status: null,
        count: null
      },
      countGroupByMonth: {
        month: null,
        count: null
      }
    }
  },
  methods: {

    submitCountGroupByMonth() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.patentList.countGroupByMonth.unshift(copyObj(this.countGroupByMonth))
        this.countGroupByMonth = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    submitCountGroupByStatus() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.patentList.countGroupByStatus.push(copyObj(this.countGroupByStatus))
        this.countGroupByStatus = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    submitCountGroupByType() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.patentList.countGroupByType.push(copyObj(this.countGroupByType))
        this.countGroupByType = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },

    submitCountGroupByYear() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.patentList.countGroupByYear.unshift(copyObj(this.countGroupByYear))
        this.countGroupByYear = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    getPatentJson() {
      this.param.version = this.patent;
      getJson(this.param).then(res => {
        this.patentList = res.data;
        // console.log(res)
      }).catch(() => {
        // this.getPatentJson()
      })
    },
    setPatentJson() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setJson(this.param, this.patentList).then(() => {
          this.getPatentJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
    OverWrite() {
      this.$confirm('确定恢复真实数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        overWrite(this.param).then(res => {
          console.log(res)
          this.getPatentJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
  },
  watch: {
    "patent": {
      handler: function () {
        this.getPatentJson();
      }
    }
  },
  mounted() {
    if (!this.watch) {
      this.getPatentJson();
    }
  },
  props: ["patent"]
}
</script>

<style scoped>

</style>